Google Charts API-তে width এবং height সেটিংস দিয়ে চার্টের আকার কাস্টমাইজ করা হয়। আপনি চাইলে width এবং height ডায়নামিকভাবে পরিবর্তন করতে পারেন, অর্থাৎ চার্টের আকার ব্যবহারকারীর ইন্টারঅ্যাকশনের মাধ্যমে পরিবর্তন করতে পারবেন।

এখানে আমরা দেখব কিভাবে Angular এর মাধ্যমে Google Chart-এর width এবং height ডায়নামিকভাবে সেট করা যায়।

Steps for Dynamic Width and Height

1. Responsive Design (ব্রাউজারের আকার অনুসারে চার্টের আকার পরিবর্তন)

চার্টের width এবং height ডায়নামিকভাবে ব্রাউজারের আকার অনুসারে পরিবর্তন করতে, আপনি CSS ব্যবহার করতে পারেন এবং Angular কম্পোনেন্টে সেই সাইজ প্রোগ্রামেটিকভাবে আপডেট করতে পারেন।

2. Window Resize Event Handling

আপনি window resize ইভেন্টের মাধ্যমে চার্টের আকার পরিবর্তন করতে পারেন।

Example: Dynamic Width and Height

এখানে আমরা একটি Pie Chart তৈরি করব এবং width এবং height ডায়নামিকভাবে ব্রাউজারের সাইজ অনুসারে পরিবর্তন করব।

1. app.component.ts (কম্পোনেন্ট ফাইল):

import { Component, OnInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, OnDestroy {
  title = 'Dynamic Google Chart Example';
  chartType = 'PieChart'; // Chart Type

  // Chart Data
  chartData = [
    ['Task', 'Hours per Day'],
    ['Work', 8],
    ['Eat', 2],
    ['Commute', 2],
    ['Watch TV', 2],
    ['Sleep', 8]
  ];

  // Chart Options
  chartOptions = {
    title: 'My Daily Activities',
    pieHole: 0.4,
    legend: { position: 'top', alignment: 'center' },
    tooltip: {
      trigger: 'focus',
      isHtml: true
    }
  };

  // Dynamic width and height
  chartWidth: number;
  chartHeight: number;

  constructor() {
    this.chartWidth = window.innerWidth * 0.7; // 70% of the window width
    this.chartHeight = window.innerHeight * 0.5; // 50% of the window height
  }

  // Handle window resize
  onResize(event: any) {
    this.chartWidth = event.target.innerWidth * 0.7; // 70% of new window width
    this.chartHeight = event.target.innerHeight * 0.5; // 50% of new window height
  }

  ngOnInit() {
    // Listen to window resize events
    window.addEventListener('resize', this.onResize.bind(this));
  }

  ngOnDestroy() {
    // Cleanup event listener when component is destroyed
    window.removeEventListener('resize', this.onResize.bind(this));
  }
}

2. app.component.html (HTML ফাইল):

<h1>{{ title }}</h1>

<!-- Google Chart কম্পোনেন্ট -->
<google-chart 
  [type]="chartType" 
  [data]="chartData" 
  [options]="chartOptions"
  [width]="chartWidth"
  [height]="chartHeight">
</google-chart>

Explanation

1. Initial Width and Height:
   chartWidth এবং chartHeight এর মান প্রাথমিকভাবে window.innerWidth এবং window.innerHeight ব্যবহার করে সেট করা হয়েছে। এর মানে, ব্রাউজারের উইন্ডোর সাইজ অনুযায়ী চার্টের আকার নির্ধারণ হবে। উদাহরণস্বরূপ, উইন্ডো সাইজের ৭০% প্রস্থ এবং ৫০% উচ্চতা ব্যবহার করা হচ্ছে।
2. Window Resize Event:
   window.addEventListener('resize', this.onResize.bind(this)) ব্যবহার করে আমরা resize ইভেন্ট লিসেনার যোগ করেছি। এটি যখন ব্রাউজারের সাইজ পরিবর্তিত হয় তখন onResize() ফাংশনটি কল করবে এবং chartWidth এবং chartHeight আপডেট হবে।
3. Dynamic Binding:
   <google-chart> কম্পোনেন্টের [width] এবং [height] প্রোপার্টি ডায়নামিকভাবে chartWidth এবং chartHeight থেকে বাইন্ড করা হয়েছে।
4. Clean Up:
   ngOnDestroy() লাইফ সাইকেল হুকের মাধ্যমে আমরা ইভেন্ট লিসেনারটি ক্লিনআপ করছি যাতে, কম্পোনেন্ট ধ্বংস হলে অতিরিক্ত ইভেন্ট লিসেনার না থাকে।

Responsive Design

Google Charts এর সঙ্গে রেসপন্সিভ ডিজাইন নিশ্চিত করতে আপনি CSS ব্যবহার করে সঠিক আকার পাবেন। উদাহরণস্বরূপ, ব্রাউজারের আকার অনুযায়ী চার্টের আকার এবং লেআউটকে কাস্টমাইজ করতে নিচের CSS ব্যবহার করা যেতে পারে:

app.component.css (CSS ফাইল):

google-chart {
  width: 100% !important;   /* Make the chart responsive */
  max-width: 800px;         /* Max width */
  height: 500px !important; /* Height of the chart */
}

এই CSS কোডটি চার্টকে 100% প্রস্থ এবং 500px উচ্চতা দিতে সাহায্য করবে, তবে চার্টের সাইজ ব্রাউজারের আকার অনুযায়ী পরিবর্তিত হবে।

সারাংশ

Google Charts এর width এবং height ডায়নামিকভাবে কাস্টমাইজ করার জন্য আপনি Angular-এ window resize ইভেন্ট ব্যবহার করতে পারেন। এভাবে, ব্রাউজারের সাইজ পরিবর্তিত হলে স্বয়ংক্রিয়ভাবে চার্টের আকারও পরিবর্তিত হবে। CSS ব্যবহার করে আরও রেসপন্সিভ ডিজাইন তৈরি করতে পারেন, যা আপনার চার্টকে বিভিন্ন ডিভাইসে সঠিকভাবে প্রদর্শন করবে।